<!DOCTYPE html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>直播大厅</title>

    <script src="/static/mui/js/mui.js"></script>
    <link href="/static/mui/css/mui.css" rel="stylesheet"/>
    <script type="text/javascript" charset="utf-8">
        mui.init();
    </script>
    <!--<link href="/static/css/css.css" rel="stylesheet" type="text/css"/>-->
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_604161_tfc7h0lgck5wxw29.css"/>

    <script src="/static/js/vue.min.js"></script>
    <script src="/static/js/vue-resource.js"></script>

    <link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.2/style/weui.min.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.0/css/jquery-weui.min.css">

    <script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery-weui/1.2.0/js/jquery-weui.min.js"></script>
    <style>
        body {
            background-color: rgb(239, 239, 244);
        }
        .select {
            height: 44px;
            line-height: 44px;
            text-align: center;
        }

        /*.item_all_b {*/
            /*border-right: 0.5px solid #f0e9e9;*/
        /*}*/

        .jiantou {
            font-size: 10px;
            color: #c6c6c6;

        }

        .bar_color {
            background-color: #FFFFFF;
           /*z-index: 201;*/
        }

        .content {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 58px;
            /*margin-bottom: 45px;*/
            padding: 0px;
            overflow: hidden;
        }

        .item_list {
            /*display: none;*/
        }

        .duihao {
            color:#fe8200;
            float: right;
        }

        .list_word {
            color: #9c9393;
            font-size: 12px;
        }

        .check {
            color: #fe8200;
        }

        /*遮罩层*/

        .md-overlay {
            position: fixed;
            left: 0;
            top: 88px;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 200;
        }

        .item_list_all {
            position: fixed;
            top: 88px;
            /*top: 90px;*/
            width: 100%;
            z-index: 201;
        }
        .card {
            font-size: 14px;
            position: relative;
            overflow: hidden;
            margin: 5px;
            border-radius: 2px;
            background-color: #fff;
            background-clip: padding-box;
            /*box-shadow: 0 1px 2px rgba(0, 0, 0, .3)*/
        }
        .bar-nav {
            top: 0;
            text-align: center;
        }
        .bar {
            position: fixed;
            z-index: 10;
            right: 0;
            left: 0;
            height: 44px;
            padding-right: 10px;
            padding-left: 10px;
            border-bottom: 0;
            backface-visibility: hidden;
        }
        .f{
            display:block;
        }
        /*删除多余边线 HYF*/
        .mui-card-header:after, .mui-card-footer:before{
            background-color: #fff;
            opacity: 0;
        }
    </style>
</head>

<body>
<!--头部开始-->
<div class="bar bar-nav bar_color">
    <span style="color:#555555;line-height: 44px;float: left" onclick="back()">
        <span class="live live-fanhui"></span>
    </span>
    <!--<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color:#555555;"></a>-->
    <span style="line-height: 44px">直播大厅</span>
</div>
<!--头部结束-->
<div id="app">
    <!--筛选头开始-->
    <div class="bar bar-nav bar_color" style="margin-top:44px;border-top: 1px solid #f4f4f4">
        <!--<div class="bar bar-nav bar_color" style="margin-top:44px;">-->
        <div class="mui-row select">
            <span class="mui-col-xs-3 mui-col-sm-3 " id="city">

                <span v-bind:class="{'check':checkCity}" @click="checkSelect(1)">{{city|setCount}}</span>
                <span class="live live-jiantouxia jiantou" v-if="checkCity==false"></span>
                <span class="live live-jiantoushang jiantou" v-else></span>
            </span>

            <span class="mui-col-xs-3 mui-col-sm-3" id="house">
                <span v-bind:class="{'check':checkHouse}" @click="checkSelect(2)">{{house|setCount}}</span>

                <span class="live live-jiantouxia jiantou" v-if="checkHouse==false"></span>
                <span class="live live-jiantoushang jiantou" v-else></span>
            </span>

            <span class="mui-col-xs-3 mui-col-sm-3" id="area">
               <span v-bind:class="{'check':checkArea}" @click="checkSelect(3)">{{area|setCount}}</span>

                <span class="live live-jiantouxia jiantou" v-if="checkArea==false"></span>
                <span class="live live-jiantoushang jiantou" v-else></span>
            </span>

            <span class="mui-col-xs-3 mui-col-sm-3" id="sort">
                <span v-bind:class="{'check':checkSort}" @click="checkSelect(4)">{{sort|setCount}}</span>

                <span class="live live-jiantouxia jiantou" v-if="checkSort==false"></span>
                <span class="live live-jiantoushang jiantou" v-else></span>
            </span>
        </div>
    </div>
    <!--筛选头结束-->

    <!--信息展示开始-->
    <div class="content">
        <div class="weui-pull-to-refresh" id="listwrap" style="height:100%; margin-top: 1px;overflow:auto;  z-index: 1">
            <!--下拉刷新-->
            <div class="weui-pull-to-refresh__layer" style="padding: 5px;">
                <div class="weui-pull-to-refresh__arrow"></div>
                <div class="weui-pull-to-refresh__preloader"></div>
                <div class="down">下拉刷新</div>
                <div class="up">释放刷新</div>
                <div class="refresh">正在刷新</div>
            </div>
            <div id="list">

                <!-- 内容开始-->
                <div class="mui-row">

                    <div class="mui-col-xs-6" v-for="item in projectList" @click="projectCheck(item)">

                            <div class="card">
                                <div class="mui-card-header mui-card-media"
                                     style="height:30vw;">
                                    <img v-bind:src="item.project_picture"style="width: 160px;height: 100px"/>
                                </div>
                                <div class="mui-card-content">
                                    <div class="mui-card-content-inner">
                                        <div class="mui-row">
                                            <div class="mui-col-xs-12" style="color: #000000;">{{item.address}}</div>

                                            <div class="mui-col-xs-6 list_word"><span v-for="(it,i) in item.client" class="layui-btn layui-btn-sm layui-btn-normal">{{it.name}}</span></div>

                                            <div class="mui-col-xs-6 list_word">{{item.area}}m²</div>
                                            <div class="mui-col-xs-6 list_word">开工日期：</div>
                                            <div class="mui-col-xs-6 list_word">{{item.start_time}}</div>
                                        </div>
                                    </div>
                                </div>
                            </div>



                    </div>

                </div>
                <!--内容结束-->
            </div>
            <div id="listend">

            </div>
            <div class="weui-loadmore" style="padding-bottom:30px;height:20px">
                <i class="weui-loading"></i>
                <span class="weui-loadmore__tips">正在加载</span>
            </div>
        </div>
    </div>
    <!--信息展示结束-->

    <!--筛选项开始-->

    <div class="item_list_all">
        <div class="item_list" id="city_list"  v-if="checkCity">
            <!--<div class="item_list" id="city_list" style="overflow: auto;height:400px;" v-if="checkCity">-->
            <ul class="mui-table-view">
                <li class="mui-table-view-cell" v-for="(item,index) in cityList"  @click="itemCheck(1,item,index)">
                    {{item.name}}
                    <span class="live live-duihao duihao"  v-if="index==checkCityItemIndex"></span>
                </li>
            </ul>
        </div>

        <div class="item_list" id="house_list" v-if="checkHouse">
            <ul class="mui-table-view">
                <li class="mui-table-view-cell" v-for="(item,index) in houseList"  @click="itemCheck(2,item,index)">
                    {{item.name}}
                    <span class="live live-duihao duihao"v-if="index==checkHouseItemIndex"></span>
                </li>
            </ul>
        </div>
        <div class="item_list" id="area_list" v-if="checkArea">
            <ul class="mui-table-view">
                <li class="mui-table-view-cell" v-for="(item,index) in areaList"  @click="itemCheck(3,item,index)">
                    {{item.name}}
                    <span class="live live-duihao duihao"  v-if="index==checkAreaItemIndex"></span>
                </li>

            </ul>

        </div>
        <div class="item_list" id="sort_list" v-if="checkSort">
            <ul class="mui-table-view">
                <li class="mui-table-view-cell" v-for="(item,index) in sortList"  @click="itemCheck(4,item,index)">
                    {{item.name}}
                    <span class="live live-duihao duihao" v-if="index==checkSortItemIndex"></span>
                </li>

            </ul>

        </div>
    </div>
    <!--筛选项结束-->

    <div class="md-overlay" v-if="checkCity" @click="checkOver"></div>
    <div class="md-overlay" v-if="checkHouse" @click="checkOver"></div>
    <div class="md-overlay" v-if="checkArea" @click="checkOver"></div>
    <div class="md-overlay" v-if="checkSort" @click="checkOver"></div>
</div>
</body>
<script src="/static/js/task.js"></script>
<script>

function back(){
    var path="{:url('/home/shouye/shouye')}";
    location.href = path;
}
</script>

</html>